<template>
  <el-card>
    <el-row
      type="flex"
      justify="space-between"
      align="middle"
      style="
        border-bottom: 1px solid #999;
        padding-bottom: 10px;
        margin-bottom: 10px;
      "
    >
      <div>试卷名称:</div>
      <el-button size="small" type="primary" @click="goBack"
        >返回列表</el-button
      >
    </el-row>
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="120px"
      :inline="true"
    >
      <el-form-item label="试卷名称" prop="paper_name">
        <el-input
          v-model="formData.paper_name"
          placeholder="请输入试卷名称"
          style="width: 540px"
        />
      </el-form-item>
      <el-form-item label="试卷包含题型" prop="quest_type">
        <el-checkbox-group v-model="formData.quest_type">
          <el-checkbox :label="1">单选题</el-checkbox>
          <el-checkbox :label="2">多选题 </el-checkbox>
          <el-checkbox :label="3">判断题</el-checkbox>
          <el-checkbox :label="4">简答题</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="归属学科" prop="subject_id">
        <el-select
          v-model="formData.subject_id"
          placeholder="归属学科"
          @focus="getSubjectTree"
          @click="getSubjectTree"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="归属目录" prop="directory_id">
        <el-select
          v-model="formData.directory_id"
          placeholder="归属目录"
          @click="getdirectoryList"
          @focus="getdirectoryList"
        >
          <el-option
            v-for="item in directoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="试卷状态">
        <el-radio v-model="formData.show_state" :label="1">启用</el-radio>
        <el-radio v-model="formData.show_state" :label="2">禁用</el-radio>
      </el-form-item>
      <el-form-item label="试卷类型">
        <el-radio v-model="formData.paper_type" :label="1">模拟卷</el-radio>
        <el-radio v-model="formData.paper_type" :label="2">真题卷</el-radio>
      </el-form-item>
      <el-form-item label="试卷总分" prop="total_score">
        <el-input
          v-model="formData.total_score"
          placeholder="请输入内容"
          style="width: 200px"
        >
          <template slot="append">分</template>
        </el-input>
      </el-form-item>
      <el-form-item label="及格分数" prop="total_score">
        <el-input
          v-model="formData.pass_score"
          placeholder="请输入内容"
          style="width: 200px"
        >
          <template slot="append">分</template>
        </el-input>
      </el-form-item>
      <el-form-item label="试题难度" label-width="84px">
        <el-select v-model="formData.difficulty" placeholder="请选择试题难度">
          <el-option label="简单" :value="1" />
          <el-option label="中等" :value="2" />
          <el-option label="困难" :value="3" />
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="选题信息">
        <el-table border :data="check_question_list" style="width: 1000px">
          <el-table-column label="题型" width="150px" prop="name">
            <template slot-scope="scope">
              <span>{{
                scope.row.type == 1
                  ? "单选题"
                  : scope.row.type == 2
                  ? "多选题"
                  : scope.row.type == 3
                  ? "判断题"
                  : "简答题"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="选题信息">
            <template slot-scope="scope">
              <span>
                共<el-input
                  v-model="scope.row.num"
                  style="width: 50px"
                />题,每题<el-input
                  v-model="scope.row.score"
                  style="width: 50px"
                />分,已选题数:{{ num }}<a />题
                <el-button
                  size="mini"
                  type="success"
                  @click="lookQuestion(scope.row.type)"
                  >看题</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="chooseQuestion(scope.row.type)"
                  >选题</el-button
                >
              </span>
              <ChooseQuestion
                ref="chooseQuestion"
                @question_data="getQuestion_data"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="center">
      <el-button size="mini" plain type="primary" @click="cancle"
        >取消</el-button
      >
      <el-button size="mini" type="primary" @click="btnOk">确认</el-button>
    </el-row>
    <LookPaper ref="lookPaper" />
  </el-card>
</template>

<script>
import { addPaper, editPaper } from "@/api/exam/paper";
import { getSubjectTree } from "@/api/subject/subject";
import ChooseQuestion from "./chooseQuestion.vue";
import LookPaper from "./lookPaper.vue";
export default {
  name: "Addpaper",
  components: {
    ChooseQuestion,
    LookPaper,
  },
  data() {
    return {
      num: 0,
      subjectList: [],
      directoryList: [],
      check_question_list: [],
      question_data: [],
      formData: {
        check_question_list: [], // 试卷包含类型
        difficulty: "", // 试卷难度
        directory_id: "", // 目录
        paper_name: "", // 试卷名称
        paper_type: 1, // 试卷类型
        pass_score: 60, // 及格分数
        quest_type: [],
        // question_data: [], // 选题信息
        question_list: [],
        show_state: 1, // 试卷状态
        subject_id: "", // 学科
        subject_name: "HTML5大前端",
        total_score: 100, // 试卷总分
      },
      rules: {
        paper_name: [{ required: true, message: "请填写", trigger: "blur" }],
        quest_type: [{ required: true, message: "请填写", trigger: "blur" }],
        subject_id: [{ required: true, message: "请填写", trigger: "blur" }],
        directory_id: [{ required: true, message: "请填写", trigger: "blur" }],
        total_score: [{ required: true, message: "请填写", trigger: "blur" }],
        pass_score: [{ required: true, message: "请填写", trigger: "blur" }],
      },
    };
  },
  watch: {
    formData: {
      handler(val) {
        const arr1 = Array.from(val.quest_type);
        this.check_question_list = Array.from(
          { length: arr1.length },
          (x, i) => ({
            type: arr1[i],
            name: "",
            num: 0,
            score: 0,
            check_list: [],
          })
        );
      },
      deep: true,
    },
  },
  methods: {
    goBack() {
      this.$emit("goback");
    },
    async getSubjectTree() {
      this.subjectList = await getSubjectTree();
      this.getdirectoryList();
    },
    getdirectoryList() {
      const arr = this.subjectList.filter(
        (item) => item.id === this.formData.subject_id
      );
      if (arr.length === 0) {
        this.directoryList = [];
      } else {
        this.directoryList = arr[0].children;
      }
    },
    lookQuestion(type) {
      if (this.question_data.length === 0) return alert("请选择题目");
      // console.log(Array.from(this.paperInfo.question_data))
      if (type === 1) {
        this.$refs.lookPaper.dialogShow = true;
        const questionList = this.question_data.filter(
          (item) => item.quest_type === type
        );
        this.$refs.lookPaper.questionList = questionList;
      }
      if (type === 2) {
        this.$refs.lookPaper.dialogShow = true;
        const questionList = this.question_data.filter(
          (item) => item.quest_type === type
        );
        this.$refs.lookPaper.questionList = questionList;
      }
      if (type === 3) {
        this.$refs.lookPaper.dialogShow = true;
        const questionList = this.question_data.filter(
          (item) => item.quest_type === type
        );
        this.$refs.lookPaper.questionList = questionList;
      }
      if (type === 4) {
        this.$refs.lookPaper.dialogShow = true;
        const questionList = this.question_data.filter(
          (item) => item.quest_type === type
        );
        this.$refs.lookPaper.questionList = questionList;
      }
    },
    chooseQuestion(type) {
      this.$refs.chooseQuestion.chooseQuestionShow = true;
      if (type === 1) {
        this.$refs.chooseQuestion.formData.quest_type = 1;
        this.$refs.chooseQuestion.getQuestionList();
      }
      if (type === 2) {
        this.$refs.chooseQuestion.formData.quest_type = 2;
        this.$refs.chooseQuestion.getQuestionList();
      }
      if (type === 3) {
        this.$refs.chooseQuestion.formData.quest_type = 3;
        this.$refs.chooseQuestion.getQuestionList();
      }
      if (type === 4) {
        this.$refs.chooseQuestion.formData.quest_type = 4;
        this.$refs.chooseQuestion.getQuestionList();
      }
    },
    getQuestion_data(data, arr) {
      this.question_data = [...this.question_data, ...data];
      this.formData.question_list = arr;
    },
    cancle() {
      this.goBack();
    },
    async btnOk() {
      try {
        await this.$refs.form.validate();
        if (this.formData.id) {
          await editPaper(this.formData);
          this.$message.success("修改成功");
        } else {
          await addPaper({
            ...this.formData,
            check_question_list: this.check_question_list,
          });
          this.$message.success("添加成功");
        }
        this.goBack();
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style></style>
